<template>
  <header class="bar bar-nav top-bar">
    <span class="goback" @click="goBack">返回</span>
    <h1 class="title">{{text}}</h1>
  </header>

</template>

<script>
  export default {

    name: 'topbar',
    props: ['text'],

    methods: {
      goBack () {
        this.$router.goBack()
      },
    }


  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .goback {
    position: absolute;
    left: .75rem;
    top:0;
    line-height: 2.5rem;
    font-size: .75rem;
    color: #ffffff;
    z-index: 100;
  }

  .top-bar {
    height: 2.5rem;
  }

  .top-bar .title {
    background:#1B1B20;
    line-height: 2.5rem;
    color: #ffffff;
    font-size: .85rem;
    /*border-bottom: 1px solid #D5D5D5;*/
  }

</style>
